<template>
  <div class="base">
    <t-row class="row-gap">
      <t-col :span="12">
        <t-form-item :label="$t('pages.source.base.status')" name="status">
          <t-switch v-model="formData.status" size="large" :default-value="true">
            <template #label="slotProps">{{ slotProps.value ? $t('switchOpen') : $t('switchClose') }}</template>
          </t-switch>
        </t-form-item>
      </t-col>
    </t-row>
    <t-row class="row-gap">
      <t-col :span="12">
        <t-form-item :label="$t('pages.source.base.siteName')" name="siteName">
          <t-input
            v-model="formData.siteName"
            :placeholder="$t('pages.source.enter') + $t('pages.source.base.siteName')"
          />
        </t-form-item>
      </t-col>
    </t-row>
    <t-row class="row-gap">
      <t-col :span="12">
        <t-form-item :label="$t('pages.source.base.version')" name="version">
          <t-input-number
            v-model="formData.version"
            min="1"
            max="9999"
            theme="column"
            :allow-input-over-limit="false"
          ></t-input-number>
        </t-form-item>
      </t-col>
    </t-row>
    <t-row class="row-gap">
      <t-col :span="12">
        <t-form-item :label="$t('pages.source.base.host')" name="host">
          <t-input
            v-model="formData.host"
            type="url"
            :placeholder="$t('pages.source.enter') + $t('pages.source.base.host')"
          />
        </t-form-item>
      </t-col>
    </t-row>
    <t-row class="row-gap">
      <t-col :span="12">
        <t-form-item :label="$t('pages.source.base.author')" name="author">
          <t-input v-model="formData.author" :placeholder="$t('pages.source.enter') + $t('pages.source.base.author')" />
        </t-form-item>
      </t-col>
    </t-row>
    <t-row class="row-gap">
      <t-col :span="12">
        <t-form-item :label="$t('pages.source.base.contact')" name="contact">
          <t-input
            v-model="formData.contact"
            :placeholder="$t('pages.source.enter') + $t('pages.source.base.contact')"
          />
        </t-form-item>
      </t-col>
    </t-row>
    <t-row class="row-gap">
      <t-col :span="12">
        <t-form-item :label="$t('pages.source.common.header')" name="header" :help="$t('pages.source.common.mustJson')">
          <steve-textarea v-model:value="formData.header" />
        </t-form-item>
      </t-col>
    </t-row>
    <t-row class="row-gap">
      <t-col :span="12">
        <t-form-item
          :label="$t('pages.source.common.publicJs')"
          name="publicJavascript"
          help="可以将一些公共的js方法或变量常量写到这里，使用前必须带@js:"
        >
          <steve-textarea v-model:value="formData.publicJavascript" />
        </t-form-item>
      </t-col>
    </t-row>
    <t-row class="row-gap">
      <t-col :span="12">
        <t-form-item
          label="登录地址"
          name="loginUrl"
        >
          <steve-textarea v-model:value="formData.loginUrl" />
        </t-form-item>
      </t-col>
    </t-row>
    <t-row class="row-gap">
      <t-col :span="12">
        <t-form-item :label="$t('pages.source.base.remarks')" name="remarks">
          <t-textarea
            v-model="formData.remarks"
            autosize
            :placeholder="$t('pages.source.enter') + $t('pages.source.base.remarks')"
          />
        </t-form-item>
      </t-col>
    </t-row>
  </div>
</template>

<script setup lang="ts">
import { toRefs } from 'vue';

import SteveTextarea from '@/components/steveTextarea/index.vue';

const props = defineProps({
  // fromData
  formData: {
    type: Object,
    // eslint-disable-next-line vue/require-valid-default-prop
    default: {},
  },
});

const { formData } = toRefs(props);
</script>
<style lang="less" scoped>
.base {
  padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);

  .row-gap {
    padding-bottom: var(--td-comp-margin-xxl);
  }
}
</style>
